import React from 'react';
import { Image, Ellipsis } from 'antd-mobile'
import { useHistory } from 'react-router-dom'
// 产品列表组件

const Productlist = (props) => {
    const { prolist } = props
    // console.log(prolist);
    const his = useHistory();

    return (
        <ul className='probox' style={{
            display: 'flex',
            flexWrap: 'wrap'

        }}>
            {
                prolist.map(item => <li
                    key={item.proid}
                    style={{
                        width: "50%",
                        display: 'flex',
                        flexDirection: 'column',
                    }}
                    onClick={() => {
                        his.push('/detail/' + item.proid)
                    }}

                >
                    <Image src={item.img1} width={'100%'}></Image>
                    <Ellipsis direction='end' rows={2} content={item.proname}></Ellipsis>
                    <p style={{
                        color: 'red',
                        fontSize: '15px'
                    }}>${item.originprice.toFixed(2)}</p>
                </li>)
            }
        </ul>
    );
}

export default Productlist;
